<template>
  <div>
    <duolianxi4
      v-for="(item, index) in list"
      :key="index"
      :impong="item.dogImgUrl"
      :name="item.dogName"
      @love="fn(item.dogName)"
    >
    </duolianxi4>
    <p>我选中的名字</p>
    <ul>
      <li v-for="(item, index) in link" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import duolianxi4 from "./conmporints/duolianxi4";
export default {
  data() {
    return {
      list: [
        {
          dogImgUrl:
            "https://img2.baidu.com/it/u=2937681459,604052930&fm=26&fmt=auto&gp=0.jpg",
          dogName: "博美",
        },
        {
          dogImgUrl:
            "https://img2.baidu.com/it/u=2937681459,604052930&fm=26&fmt=auto&gp=0.jpg",
          dogName: "泰迪",
        },
        {
          dogImgUrl:
            "https://img2.baidu.com/it/u=2937681459,604052930&fm=26&fmt=auto&gp=0.jpg",
          dogName: "金毛",
        },
        {
          dogImgUrl:
            "https://img2.baidu.com/it/u=2937681459,604052930&fm=26&fmt=auto&gp=0.jpg",
          dogName: "哈士奇",
        },
        {
          dogImgUrl:
            "https://img2.baidu.com/it/u=2937681459,604052930&fm=26&fmt=auto&gp=0.jpg",
          dogName: "阿拉斯加",
        },
        {
          dogImgUrl:
            "https://img2.baidu.com/it/u=2937681459,604052930&fm=26&fmt=auto&gp=0.jpg",
          dogName: "萨摩耶",
        },
      ],
      link: [],
    };
  },
  components: {
    duolianxi4,
  },
  methods: {
    fn(dogName) {
      this.link.push(dogName);
    },
  },
};
</script>

<style>
</style>